<template>
    <div>
        <Particles
            id="tsparticles"
            :particlesInit="particlesInit"
            :options="options"
        />
        <div class="formContainer">            
            <h3>成都设备制造企业后台管理网站</h3>
            <el-form
                ref="loginFormRef"
                :model="loginForm"
                status-icon
                :rules="loginRules"
                label-width="120px"
                class="loginForm1"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input style="width: 81%;" v-model="loginForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input style="width: 81%;" v-model="loginForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
    import {reactive,ref} from 'vue'
    import {useRouter} from 'vue-router'
    import {ElMessage} from 'element-plus'
    import {loginAPI} from '@/api'
    import { useStore } from 'vuex'
    import { loadFull } from "tsparticles";

    const loginForm=reactive({
        username:'',
        password:''
    })
    const loginFormRef=ref()
    const loginRules=reactive({
        username:[{required:true,message:'请输入用户名', trigger: 'blur'}],
        password:[{required:true,message:'请输入密码', trigger: 'blur'}]
    })
    const router=useRouter()
    const store=useStore()
    // 提交表单函数
    const submitForm=()=>{
        // 1.校验表单
        loginFormRef.value.validate(async valid=>{
            if(valid){
                const {data:res}=await loginAPI(loginForm) 
                if(res.status===0 || res.message==='登录成功'){
                        store.commit('updateToken',res.token)
                        store.commit('getuser',res.data)
                        store.dispatch('getAllCompany')                        
                        router.push("/index")
                        ElMessage.success('登录成功')
                    }else{
                        ElMessage.error('用户名或者密码错误')
                    }            
            }
        })

    }

    // 粒子库
    const particlesInit = async engine => {
        await loadFull(engine);
    };

    const options={
            background: {
                color: {
                    value: '#0d47a1'
                }
            },
            fpsLimit: 120,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: 'push'
                    },
                    onHover: {
                        enable: true,
                        mode: 'repulse'
                    },
                    resize: true
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40
                    },
                    push: {
                        quantity: 4
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4
                    }
                }
            },
            particles: {
                color: {
                    value: '#ffffff'
                },
                links: {
                    color: '#ffffff',
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1
                },
                collisions: {
                    enable: true
                },
                move: {
                    direction: 'none',
                    enable: true,
                    outModes: {
                        default: 'bounce'
                    },
                    random: false,
                    speed: 6,
                    straight: false
                },
                number: {
                    density: {
                        enable: true,
                        area: 900
                    },
                    value: 40
                },
                opacity: {
                    value: 0.5
                },
                shape: {
                    type: 'circle'
                },
                size: {
                    value: { min: 1, max: 5 },
                }
            },
            detectRetina: true
        }

</script>

<style lang="scss" scoped>
    .formContainer{
        width:500px;
        height: 300px;
        position: fixed;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        background: rgba(11, 33, 72, 0.5);
        color:white;
        text-align: center;
        padding:20px;
        h3{
            font-size: 30px;
        }
        .loginForm1{
            margin-top:20px;
        }
    }
    ::v-deep .el-form-item__label{
        color:white
    }
</style>